﻿<div class="selectedClientBorder">
    <img class="selectedClientImg" data-bind="attr: { src: picture }, html: $root.pictureError($data, $element)" src="img/anonymous-avatar.jpg" />
</div>
<span class="selectedClientInfo" data-bind="text: patient && patient.LastName?
    ( patient.Title + ' ' + patient.FirstName + ' ' + patient.LastName.toUpperCase() + ' (' + Globalize.format(patient.BirthDate, 'dd.MM.yyyy') + ' | ' + patient.Age +
    (patient.Room != null ? (' | Zi.: ' + patient.Room) : '') + ')' ): ''"></span>

<div class="fa fa-plus redCross fa-2x" data-bind="css: { hide: patient.Allergies.length == 0 }, click: toggleAllergyDetailsVisibility">
    <div class="allergySlidingPanel" data-bind="click: cancelBubble">
        <div class="patientBarControlAllergyDetails slidingPanel overflow-IndicatorContener" data-bind="css: allergyDetailsVisible ? 'showSlidingPanel' : 'hideSlidingPanel'">
            <div class="overflowIndicator fa fa-sign-out fa-2x fa-rotate-90"></div>
            <h4 data-bing="text:Application.Resources.Viewes.HeaderPatienInfo.Diagnosen">Diagnosen:</h4>
            <div class="alergy-wrapper scroll-y">
                <ul id="alergies" class="resetUl" data-bind="foreach: patient.Allergies">
                    <li class="tap-space" data-bind="testOverflow:true">
                        <span data-bind="text: 'Beginn: ' + StartDate + ' Code: ' + Code + ' Diagnosetext: ' + Text"></span>
                        <br />
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
